<template>
  <view>
    <view class="box">
      <view class="explain">
        <text>次卡名称:</text>
        <text>{{ goods.FName }}</text>
      </view>
      <view class="explain">
        <text>可用次数:</text>
        <text>{{ goods.FTime }}</text>
      </view>
      <view class="explain">
        <text>使用限制:</text>
        <text>{{ goods.FCardTypeDesc }}</text>
      </view>
      <view class="explain">
        <text>使用门店:</text>
        <text>{{ goods.StockName }}</text>
      </view>
      <view class="explain">
        <text style="float: left">支付方式:</text>
        <view class="way">
          <radio-group @change="onWay">
            <view class="" style="float: left">
              <text>微信支付</text>
              <radio value="1" :checked="true"></radio>
            </view>
            <!-- <view class="" style="float: left;">
							<text>会员卡支付</text>
							<radio value="2"></radio>
						</view> -->
          </radio-group>
        </view>
      </view>
      <button class="but" id="way" @click="onPay">
        ￥{{ goods.FAmount }} 支付
      </button>
    </view>
  </view>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      goods: "",
      payID: 1,
      topupID: 0,
    };
  },
  onLoad(options) {
    this.goods = JSON.parse(options.goodsCard);
    console.log(this.goods);
    // this.goods = options;
  },
  methods: {
    ...mapMutations(["onCoupon", "onCard"]),
    onWay(e) {
      this.payID = e.detail.value;
    },
    onPay(e) {
      if (this.payID === 0) {
        this.$api.msg("请选择支付方式！！");
        return;
      }
      let data = {
        TopupType: 3, //充值类型
        TimeId: this.goods.FItemID, //充值方案Id
        miniType: "Member",
        PayType: this.payID, //支付方式
      };
      if (this.topupID == 0) {
        this.onCardPay("MemberShop/WxPayApply", data);
        this.topupID = 1;
      } else {
        this.$api.msg("你的速度太快了，我跟不上");
      }
    },
    onCardPay(url, data) {
      uni.showLoading({
        title: "支付中，请稍后",
      });
      this.$util
        .util(url, data, "GET")
        .then((res) => {
          if (this.payID == 2) {
            //会员卡余额支付
            this.topupID = 0;
            setTimeout(() => {
              uni.hideLoading();
              this.onCard(
                this.$store.state.cardNumber +
                  this.goods.FTime +
                  this.goods.FSetQty
              );
              this.$api.msg("会员卡余额支付成功!");
              uni.navigateBack({
                delta: 2,
              });
            }, 1500);
          } else {
            //移动支付
            let data = res.respData;
            uni.requestPayment({
              provider: "wxpay",
              timeStamp: data.payTimeStamp,
              nonceStr: data.paynonceStr,
              package: data.payPackage,
              signType: data.paySignType,
              paySign: data.paySign,
              success: (res) => {
                this.onCard(
                  this.$store.state.cardNumber +
                    this.goods.FTime +
                    this.goods.FSetQty
                );
                this.$api.msg("成功");
                this.topupID = 0;
                setTimeout(() => {
                  uni.navigateBack({
                    delta: 2,
                  });
                }, 200);
              },
              fail: (error) => {
                console.log(error);
                this.topupID = 0;
                if (error.errMsg == "requestPayment:fail cancel") {
                  this.$api.msg("您已取消支付");
                } else {
                  this.$api.msg("支付失败");
                }
              },
              complete: (data) => {
                uni.hideLoading();
              },
            });
          }
        })
        .catch((error) => console.log(error));
    },
  },
};
</script>

<style lang="scss">
@import "../../static/css/li_mixins.scss";
.box {
  padding: 50rpx 30rpx;
  .explain {
    width: 100%;
    display: inline-block;
    margin: 20rpx 0;
    font-size: 32rpx;
    text:first-child {
      color: #a2a2a2;
      margin-right: 20rpx;
    }
    text:last-child {
      color: #000;
      font-weight: bold;
    }
  }

  .way {
    view {
      margin-right: 30rpx;
    }
    text {
      color: #000 !important;
      font-weight: bold;
    }
  }

  #way {
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    background-color: $li-primary-color;
    color: #fff;
    font-size: 40rpx;
    border-radius: 50rpx;
    margin: 40rpx 0;
  }
}
</style>
